<template>
    <div class="rich-text-editor">
      <!-- 工具栏 -->
      <div class="toolbar">
        <el-button-group>
          <el-button :icon="Star" @click="insertText('bold')" title="加粗" />
          <el-button :icon="ArrowLeft" @click="insertText('italic')" title="斜体" />
          <el-button @click="insertText('h2')" title="标题">H</el-button>
          <el-button @click="insertLink" title="链接">
            <el-icon><Link /></el-icon>
          </el-button>
          <el-button @click="insertEmoji" title="表情">
            <el-icon><Picture /></el-icon>
          </el-button>
        </el-button-group>
      </div>
      
      <!-- 编辑区域 -->
      <div 
        ref="editor" 
        class="editor" 
        contenteditable="true" 
        @input="handleInput"
        :placeholder="placeholder"
      ></div>
    </div>
  </template>
  
  <script setup lang="ts"> 
 //npm install -D sass-embedded
  import { ref, watch, onMounted } from 'vue'
  //import { Bold, Italic, Link, Picture } from '@element-plus/icons-vue'
   import { Star, ArrowLeft, Link, Picture } from '@element-plus/icons-vue'
  
  const props = defineProps({
    modelValue: String,
    placeholder: {
      type: String,
      default: '请输入内容...'
    }
  })
  
  const emit = defineEmits(['update:modelValue'])
  
  const editor = ref<HTMLElement | null>(null)
  
  // 处理输入
  const handleInput = () => {
    if (editor.value) {
      emit('update:modelValue', editor.value.innerHTML)
    }
  }
  
  // 插入格式
  const insertText = (type: string) => {
    if (!editor.value) return
    
    const selection = window.getSelection()
    if (!selection || selection.rangeCount === 0) return
    
    const range = selection.getRangeAt(0)
    const selectedText = range.toString()
    
    switch (type) {
      case 'bold':
        document.execCommand('bold', false)
        break
      case 'italic':
        document.execCommand('italic', false)
        break
      case 'h2':
        document.execCommand('formatBlock', false, '<h2>')
        break
    }
    
    editor.value.focus()
  }
  
  // 插入链接
  const insertLink = () => {
    const url = prompt('请输入链接地址:', 'https://')
    if (url) {
      document.execCommand('createLink', false, url)
    }
  }
  
  // 插入表情
  const insertEmoji = () => {
    // 这里可以扩展为表情选择器
    const emoji = prompt('输入表情符号:', '😊')
    if (emoji) {
      document.execCommand('insertText', false, emoji)
    }
  }
  
  // 监听modelValue变化
  watch(() => props.modelValue, (newVal) => {
    if (editor.value && editor.value.innerHTML !== newVal) {
      editor.value.innerHTML = newVal || ''
    }
  })
  
  // 初始化
  onMounted(() => {
    if (editor.value && props.modelValue) {
      editor.value.innerHTML = props.modelValue
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .rich-text-editor {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    
    .toolbar {
      padding: 5px;
      border-bottom: 1px solid #dcdfe6;
      background-color: #f5f7fa;
    }
    
    .editor {
      min-height: 200px;
      padding: 10px;
      outline: none;
      
      &[contenteditable="true"]:empty:before {
        content: attr(placeholder);
        color: #c0c4cc;
        pointer-events: none;
        display: block;
      }
    }
  }
  </style>